<template>
    <div id="Content">
    <div id="Catalog" style="margin-top: -20px">

        <form action="" name="registerForm">
            <h3 style="color:rgba(0,0,0,0.78); font-family: 'Arial Black';font-size: 25px;">User Information</h3>

            <table>
                <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                    <td>User ID:</td>
                    <td><input type="text" name="username" id="username" v-model="accountVO.username"/></td>
                    <div id="usernameMsg"></div>
                </tr>
                <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                    <td>New password:</td>
                    <td><input type="password" name="password1" v-model="accountVO.password"/></td>
                </tr>
                <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                    <td>Repeat password:</td>
                    <td><input type="password" name="password2"/></td>
                </tr>
            </table>

            <!-- <div th:include="/account/includeAccountFields :: common"></div> -->
            <h3 style="color:rgba(0,0,0,0.78); font-family: 'Arial Black';font-size: 25px;">Account Information</h3>

        <table>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>First name:</td>
                <td><input type="text" name="firstName" v-model="accountVO.firstName"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Last name:</td>
                <td><input type="text" name="lastName" v-model="accountVO.lastName"/></td>
            </tr >
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Email:</td>
                <td><input type="text" name="email" v-model="accountVO.email"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Phone:</td>
                <td><input type="text" name="phone" v-model="accountVO.phone"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Address 1:</td>
                <td><input type="text" name="address1" v-model="accountVO.address1"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Address 2:</td>
                <td><input type="text" name="address2" v-model="accountVO.address2"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>City:</td>
                <td><input type="text" name="city" v-model="accountVO.city"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>State:</td>
                <td><input type="text" name="state" v-model="accountVO.state"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Zip:</td>
                <td><input type="text" name="zip" v-model="accountVO.zip"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Country:</td>
                <td><input type="text" name="country" v-model="accountVO.country"/></td>
            </tr>
        </table>

        <h3 style="color:rgba(0,0,0,0.78); font-family: 'Arial Black';font-size: 25px;">Profile Information</h3>

        <table>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Language Preference:</td>
                <td>
                    <select name="languagePreference" v-model="accountVO.languagePreference">
                        <option value="English">English</option>
                        <option value="Japanese">Japanese</option>
                    </select>
                </td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Favourite Category:</td>
                <td>
                    <select name="favouriteCategoryId" v-model="accountVO.favouriteCategoryId">
                        <option value="BIRDS">BIRDS</option>
                        <option value="CATS">CATS</option>
                        <option value="DOGS">DOGS</option>
                        <option value="FISH">FISH</option>
                        <option value="REPTILES">REPTILES</option>
                    </select>
                </td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Enable MyList</td>
                <td><input type="checkbox" name="listOption" value="yes" v-model="accountVO.listOption"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Enable MyBanner</td>
                <td><input type="checkbox" name="bannerOption" value="yes" v-model="accountVO.bannerOption"/></td>
            </tr>

        </table>

            <input style="font-size: 20px" type="submit" value="Submit" name="submit" @click=""/>
        </form>


        <p><font color="red">{{msg}}</font></p>

    </div>
</div>
</template>

<script>
    export default {
        name: "Register",
        data() {
            return {
                msg: '',
                accountVO: {
                    username: '',
                    password: '',
                    firstName: '',
                    lastName: '',
                    email: '',
                    phone: '',
                    address1: '',
                    address2: '',
                    city: '',
                    state: '',
                    zip: '',
                    country: '',
                    languagePreference: '',
                    favouriteCategoryId: '',
                    listOption: '',
                    bannerOption: ''
                }
            }
        },
        methods: {
            
        }
    }
</script>

<style scoped>
    @import "../../assets/css/jpetstore.css";
</style>